<template>
<!--  设备台账详情-->
  <div class="app-container equipmentDetail">
    <el-dialog
      title="详情"
      :visible.sync="centerDialogVisible"
      width="85%"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :before-close="close"
     class="dialog"

      >
      <div style="max-width:1500px;margin:auto;">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane name="1">
        <span slot="label"><i class="el-icon-date"></i> 基本信息</span>
        <div class="middle left">
          <el-radio disabled v-model="detailForm.deviceLevel" :label="1">主设备</el-radio>
          <el-radio disabled v-model="detailForm.deviceLevel" :label="2">子设备</el-radio>
          <h4>基本信息</h4>
          <table border="1" rules="all" class="table">
            <tr>
              <td class="titleName">设备编号</td>
              <td class="inputName">{{detailForm.deviceCode}}</td>
              <td class="titleName">资产编号</td>
              <td class="inputName">{{detailForm.assetsCode}}</td>
              <td class="titleName">出厂编号</td>
              <td class="inputName">{{detailForm.factoryCode}}</td>
            </tr>
            <tr>
              <td class="titleName">设备名称</td>
              <td class="inputName">{{detailForm.deviceName}}</td>
              <!-- <td class="titleName">电子标签码</td>
              <td class="inputName">{{detailForm.electronicLabel}}</td> -->
              <td class="titleName">设备分类</td>
              <td class="inputName">{{detailForm.deviceTypeName}}</td>
              <td class="titleName">购买形式</td>
              <td class="inputName">
                {{detailForm.purchasingForm==1?'购买':'租赁'}}
              </td>
            </tr>
            <tr>
              <!-- <td class="titleName">品牌</td>
              <td class="inputName">{{detailForm.deviceBrandsName}}</td> -->
              <td class="titleName">规格型号</td>
              <td class="inputName" colspan="3">{{detailForm.deviceModel}}</td>
              <td class="titleName">单位</td>
              <td class="inputName">{{detailForm.deviceUnitName}}</td>
            </tr>
            <tr>
              <td class="titleName">生产厂家</td>
              <td class="inputName">{{detailForm.supplierName}}</td>
              <td class="titleName">购置日期</td>
              <td class="inputName">{{detailForm.buyDate}}</td>
              <!-- <td class="titleName">购置金额</td>
              <td class="inputName">{{detailForm.buyMoney}}</td> -->
              <td class="titleName">招标日期</td>
              <td class="inputName">{{detailForm.invitationDate}}</td>
            </tr>
            <tr>
              <td class="titleName">到矿日期</td>
              <td class="inputName">{{detailForm.arrivalDate}}</td>
              <!-- <td class="titleName">保修期（到期日）</td>
              <td class="inputName">{{detailForm.warrantyTime}}</td> -->
              <td class="titleName">投产日期</td>
              <td class="inputName" colspan="3">{{detailForm.productionDate}}</td>
              <!-- <td class="titleName">预计报废日期</td>
              <td class="inputName">{{detailForm.expectedRetireDate}}</td> -->
            </tr>
            <tr>
              <!-- <td class="titleName">过煤量/进尺</td>
              <td colspan="2" class="inputName">{{detailForm.coalYield}}</td> -->
              <td class="titleName">设备状态</td>
              <td class="inputName">{{detailForm.deviceStatusName}}</td>
              <td class="titleName">技术改造(机械方面)</td>
              <td class="inputName">{{detailForm.remouldMechanical}}</td>
              <td class="titleName">技术改造(电器方面)</td>
              <td class="inputName">{{detailForm.remouldElectric}}</td>
            </tr>
            <tr>
              <td class="titleName">所属部门</td>
              <td colspan="5" class="inputName">{{detailForm.departmentName}}</td>
            </tr>
            <tr>
              <td class="titleName">存放位置</td>
              <td colspan="5" class="inputName">{{detailForm.repositoryName}}</td>
            </tr>
            <!-- <tr>
              <td class="titleName">是否开启管控</td>
              <td class="inputName">{{detailForm.isControl==1?'是':'否'}}</td>
              <td class="titleName">是否开启折旧</td>
              <td class="titleName">{{detailForm.isDepreciation==1?'是':'否'}}</td>
              <td class="titleName">当前净值</td>
              <td class="inputName">{{detailForm.currentValue}}</td>
            </tr> -->
            <!-- <tr>
              <td class="titleName">理论生产节拍</td>
              <td colspan="5" class="inputName">{{detailForm.produceBeat}}</td>
            </tr> -->
            <tr>
              <td class="titleName">备注</td>
              <td colspan="5" class="inputName">{{detailForm.remark}}</td>
            </tr>
          </table>
          <!-- <h4>拓展属性</h4>
          <table border="1" rules="all" class="table">
            <tr>
              <td class="titleName">设备机况</td>
              <td colspan="5" class="inputName">{{detailForm.machineConditionName}}</td>
            </tr>
          </table> -->
          <div class="upload">
            <h4>设备图片</h4>
            <div class="unloadBox">
              <div class="img" v-for="(item,index) in annexImgList">
                <el-image :src="baseUrl()+item.filePath" :preview-src-list="[baseUrl()+item.filePath]"></el-image>
              </div>
            </div>
          </div>
        </div>
        <div class="middle right">
          <div class="upload">
            <h4>相关文件</h4>
            <div class="unloadBox">
              <div class="file" v-for="(item,index) in annexFileList">
                <span class="index">{{index+1}}、</span>
                <span class="blue">{{item.fileName}}</span>
                <i class="blue el-icon-bottom" @click="fileDown(index,item.filePath)" ></i>
                <span class="type">{{filterDocumentRank(item.encryptionRank)}}</span>
                <span class="type">{{filterAnnexType(item.typeId)}}</span>
              </div>
            </div>
          </div>
          <h4 v-if="detailForm.deviceLevel==1">子设备</h4>
          <el-table :data="deviceSubsetList" border v-if="detailForm.deviceLevel==1">
            <el-table-column align="center" label="设备编号" property="deviceCode" width="150"></el-table-column>
            <el-table-column align="center" label="设备名称" property="deviceName"
                             :show-overflow-tooltip="true"></el-table-column>
            <!-- <el-table-column align="center" label="设备品牌" property="deviceSubsetList" :show-overflow-tooltip="true"
                             width="150"></el-table-column> -->
            <el-table-column align="center" label="设备型号" property="deviceModel" width="100"></el-table-column>
          </el-table>
          <h4>技术参数</h4>
          <el-table :data="deviceExpandList" border>
            <el-table-column type="index" label="序号" width="50px" />
            <el-table-column align="center" label="名称" prop="expandKey" />
            <el-table-column align="center" label="属性值" prop="expandValue" />
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane name="2">
        <span slot="label"><i class="el-icon-date"></i> 维修记录</span>
        <h4>
          维修记录
        </h4>
        <div style="width: 50%">
          <el-table  :data="wxjlList" stripe border>
            <el-table-column align="center" label="报修时间"   property="biaoti" :show-overflow-tooltip="true"  ></el-table-column>
            <el-table-column align="center" label="报修人" property="biaoti" :show-overflow-tooltip="true" width="150" ></el-table-column>
            <el-table-column align="center" label="处理时间"  property="biaoti" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" label="处理人" property="biaoti" :show-overflow-tooltip="true" width="150" ></el-table-column>
          </el-table>
          <pagination
            :total="total"
            :page.sync="selectForm.pageNum"
            :limit.sync="selectForm.pageSize"
            @pagination="getrepairList"
          />
        </div>

      </el-tab-pane>
<!--      <el-tab-pane name="3">-->
<!--        <span slot="label"><i class="el-icon-date"></i> 养护记录</span>-->
<!--        <h4>-->
<!--          养护记录-->
<!--        </h4>-->
<!--        <div style="width: 50%">-->
<!--          <el-table  :data="yanghulList" stripe border>-->
<!--            <el-table-column align="center" label="养护时间"   property="executedate" :show-overflow-tooltip="true"  ></el-table-column>-->
<!--            <el-table-column align="center" label="养护人" property="nickName" width="150" ></el-table-column>-->
<!--            <el-table-column align="center" label="费用"  property="consercost" :show-overflow-tooltip="true" ></el-table-column>-->
<!--            <el-table-column align="center" label="备注" property="consedescribe" :show-overflow-tooltip="true"></el-table-column>-->
<!--          </el-table>-->
<!--          <pagination-->
<!--            :total="total"-->
<!--            :page.sync="selectForm.pageNum"-->
<!--            :limit.sync="selectForm.pageSize"-->
<!--            @pagination="getcuringList"-->
<!--          />-->
<!--        </div>-->

<!--      </el-tab-pane>-->
      <el-tab-pane name="4">
        <span slot="label"><i class="el-icon-date"></i> 调拨转移记录</span>
        <h4>
          调拨转移记录
        </h4>
        <div style="width: 50%">
          <el-table  :data="tiaobolList" stripe border>
            <el-table-column align="center" label="调拨日期"   property="allocationDate" :show-overflow-tooltip="true"  ></el-table-column>
            <el-table-column align="center" label="调入部门/地点" property="receiveSiteDetail" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" label="经手人"  property="chargePersonId" width="100" ></el-table-column>
          </el-table>
          <pagination
            :total="total"
            :page.sync="selectForm.pageNum"
            :limit.sync="selectForm.pageSize"
            @pagination="gettransferList"
          />
        </div>

      </el-tab-pane>
      <!-- <el-tab-pane name="5">
        <span slot="label"><i class="el-icon-date"></i> 更换记录</span>
        <h4>
          更换记录
        </h4>
        <el-table  :data="genghuanlList" stripe style="width: 70%" border>
          <el-table-column align="center" label="更换时间"   property="biaoti" :show-overflow-tooltip="true"  ></el-table-column>
          <el-table-column align="center" label="更换原因" property="biaoti" :show-overflow-tooltip="true" width="150" ></el-table-column>
          <el-table-column align="center" label="耗材编号"  property="biaoti" width="100" ></el-table-column>
          <el-table-column align="center" label="耗材名称"  property="biaoti" width="100" ></el-table-column>
          <el-table-column align="center" label="品牌"  property="biaoti" width="100" ></el-table-column>
          <el-table-column align="center" label="分类"  property="biaoti" width="100" ></el-table-column>
          <el-table-column align="center" label="规格"  property="biaoti" width="100" ></el-table-column>
          <el-table-column align="center" label="单位"  property="biaoti" width="100" ></el-table-column>
          <el-table-column align="center" label="数量"  property="biaoti" width="100" ></el-table-column>
          <el-table-column align="center" label="关联单号"  property="biaoti" width="100" ></el-table-column>
        </el-table>
      </el-tab-pane> -->
      <el-tab-pane name="6">
        <span slot="label"><i class="el-icon-date"></i> 点检记录</span>
        <h4>
          点检记录
        </h4>
        <div style="width: 50%">
          <el-table  :data="dianjianlList" stripe border>
            <el-table-column align="center" label="点检日期"   property="biaoti" :show-overflow-tooltip="true"  ></el-table-column>
            <el-table-column align="center" label="点检人" property="biaoti" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" label="异常个数"  property="biaoti" :show-overflow-tooltip="true"></el-table-column>
          </el-table>
          <pagination
            :total="total"
            :page.sync="selectForm.pageNum"
            :limit.sync="selectForm.pageSize"
            @pagination="getcheckList"
          />
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane name="7">
        <span slot="label"><i class="el-icon-date"></i> 计量记录</span>
        <h4>
          计量记录
        </h4>
        <el-table  :data="jilainglList" stripe style="width: 50%" border>
          <el-table-column align="center" label="任务编号"   property="biaoti" :show-overflow-tooltip="true"  ></el-table-column>
          <el-table-column align="center" label="计划编号" property="biaoti" :show-overflow-tooltip="true" width="150" ></el-table-column>
          <el-table-column align="center" label="处理人"  property="biaoti" width="100" ></el-table-column>
          <el-table-column align="center" label="计划处理时间"  property="biaoti" width="100" ></el-table-column>
          <el-table-column align="center" label="实际处理时间"  property="biaoti" width="100" ></el-table-column>
          <el-table-column align="center" label="结果"  property="biaoti" width="100" ></el-table-column>
        </el-table>
      </el-tab-pane> -->
    </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import  {deviceAnnexType,deviceDocumentRank,fileDownload,deviceUnits} from '@/api/basicInformation/index'
  import  {deviceDetail,transfer,repair,curing,check} from '@/api/device/index'
  export default {
    name: "equipmentDetail",
    props:['pid'],
    data() {
      return {
        centerDialogVisible:true,
        detailForm:[],
        deviceUnitsList:'',

        annexImgList:'',
        annexFileList:'',
        deviceSubsetList:[],
        deviceExpandList:[],

        jilainglList:[//计量记录

        ],
        dianjianlList:[//点检记录

        ],
        genghuanlList:[//更换记录

        ],
        tiaobolList:[//调拨转移记录

        ],
        yanghulList:[//养护记录

        ],
        wxjlList:[//维修记录

        ],
        total:0,
        selectForm:{
          pageNum:1,
          pageSize:10,
        },
        //关联备件
        guanlianList:[
          {devicecode:'001',deviceName:'啥设备',deviceBrand:'中国',deviceModel:'啥型号'},
          {devicecode:'002',deviceName:'啥设备',deviceBrand:'中国',deviceModel:'啥型号'},
        ],
        addProductData:{},//传给子设备的数据
        addProductShow:false,//子设备弹框
        //子设备数据
        zsbroleList:[
          {devicecode:'001',deviceName:'啥设备',deviceBrand:'中国',deviceModel:'啥型号'},
          {devicecode:'002',deviceName:'啥设备',deviceBrand:'中国',deviceModel:'啥型号'},

        ],
        activeName: '1'
      };
    },
    created() {
      this.getDeviceDetail(this.pid)
      this.getDeviceDocumentRank()
      this.getdeviceAnnexType()
      this.getDeviceUnits()
    },
    methods: {
      close(){
        this.$emit('subSetChane')
      },
      async getDeviceDetail(id){
        let res=await deviceDetail(id)
        this.detailForm=res.data.deviceVo;
        this.annexImgList=res.data.annexImgList;
        this.annexFileList=res.data.annexFileList;
        this.deviceSubsetList=res.data.deviceSubsetList;
        this.deviceExpandList=res.data.deviceExpandList;
      },
      //调拨转移列表
      async gettransferList(){
        let res=await transfer(this.pid,this.selectForm)
        this.tiaobolList=res.rows
        this.total = res.total
      },
      //维修记录列表
      async getrepairList(){
        let res=await repair({deviceId:this.pid,...this.selectForm})
        this.wxjlList=res.rows
        this.total = res.total
      },
      //养护记录列表
      async getcuringList(){
        let res=await curing(this.pid,this.selectForm)
        this.yanghulList=res.rows
        this.total = res.total
      },
      //巡检记录列表
      async getcheckList(){
        let res=await check(this.pid,this.selectForm)
        this.dianjianlList=res.rows
        this.total = res.total
      },
      /** 查询设备文档加密级别*/
      async getDeviceDocumentRank(){
        let res=await deviceDocumentRank()
        this.deviceDocumentRankList=res.data
      },
      /** 查询设备文档类型*/
      async getdeviceAnnexType(){
        let res=await deviceAnnexType()
        this.deviceAnnexTypeList=res.data
      },
      /** 获取设备单位*/
      async getDeviceUnits(){
        let res=await deviceUnits()
        this.deviceUnitsList=res.data
      },
      /** 过滤加密级别*/
      filterDocumentRank(id){
        for(var i=0;i<this.deviceDocumentRankList.length;i++){
          if(id==this.deviceDocumentRankList[i].dictCode){
            return this.deviceDocumentRankList[i].dictLabel
          }
        }
      },
      /** 过滤文档类型*/
      filterAnnexType(id){
        for(var i=0;i<this.deviceAnnexTypeList.length;i++){
          if(id==this.deviceAnnexTypeList[i].dictCode){
            return this.deviceAnnexTypeList[i].dictLabel
          }
        }
      },
      filterDeviceUnits(id){
        for(var i=0;i<this.deviceUnitsList.length;i++){
          if(id==this.deviceUnitsList[i].dictCode){
            return this.deviceUnitsList[i].dictLabel
          }
        }
      },
      async fileDown(index,filePath){
        this.downloadFile(encodeURI(filePath))
        //await fileDownload(filePath);
      },


      /** 季明聪**/
      handleClick(tab, event) {
        // console.log(tab, event);
        console.log(this.activeName)
        this.total=0
        this.selectForm.pageNum=1
        this.selectForm.pageSize=10
        switch (this.activeName) {

          case '2':
            this.getrepairList()
            break;
          case '3':
            this.getcuringList()
            break;
          case '4':
            this.gettransferList()
            break;
          case '5':
            break;
          case '6':
            this.getcheckList()
            break;
          case '7':
            break;
          default:
            break;
        }
      },
      //维修记录分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      //计量记录分页
      handleSizeChangeJL(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangeJL(val) {
        console.log(`当前页: ${val}`);
      },
      //点检记录分页
      handleSizeChangeDJ(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangeDJ(val) {
        console.log(`当前页: ${val}`);
      },
      //更换记录分页
      handleSizeChangeGH(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangeGH(val) {
        console.log(`当前页: ${val}`);
      },
      //调拨记录分页
      handleSizeChangeDB(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangeDB(val) {
        console.log(`当前页: ${val}`);
      },
      //养护记录分页
      handleSizeChangeYH(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangeYH(val) {
        console.log(`当前页: ${val}`);
      },


    }
  };
</script>
<style lang="scss" scoped>
  .equipmentDetail {
    .dialog >>> .el-dialog__body{
      height: 85vh;
      overflow: scroll;
    }
    .submit {
      width: 100%;
      text-align: center;

      .el-button {
        margin-top: 20px;
      }
    }

    .blue {
      color: #2196F3;
    }

    h4 {
      color: #05A380;
    }
    .middle{
      /*width:100%;*/
      width: 48%;
      margin-right:2%;
      .upload{
        margin-top:20px;
      }
    }
    .left{
      float: left;
      .table {
        border: 1px solid #cccccc;
        color: #606266;
        font-size: 14px;
        width:100%;
        .titleName {
          text-align: center;
          width: 12%;
          padding:10px 5px;
        }
        .inputName {
          width:21%;
          padding-left:10px;
        }
        .el-select{
          //width: 100%;
        }
        .el-input{
          max-width: 150px;
        }
      }
    }
    .unloadBox{
      border: 1px solid #cccccc;
      margin-top:20px;
      min-height: 50px;
      overflow: hidden;
      .file{
        width:100%;
        border-top:1px #cccccc dotted;
        line-height: 50px;
        .index{
          padding:0 10px;
          color:#666
        };
        i{
          float: right;
          line-height: 50px;
          padding-right: 10px;
          font-size: 20px;
          cursor: pointer;
        }
        .type{
          color: #666;
          float: right;
          padding-right: 30px;
        }

      }
      .img{
        margin:10px 0 10px 10px;
        text-align: center;
        float: left;
        position: relative;
        width:110px;
        height:100px;
        .el-image{
          width:100px;
          height:100px;
          border: 1px solid #cccccc;
          position: absolute;
          top:0;
          left:0;
        }
        i{
          position: absolute;
          right: 0px;
          font-size: 20px;
          top: -4px;
          z-index: 1;
        }
      }



    }
    .right{
      float: right;
    }
  }
</style>
